// 有状态组件
import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/cart/index.dart';
import 'package:flutter_shop/pages/categroy/index.dart';
import 'package:flutter_shop/pages/home/index.dart';
import 'package:flutter_shop/pages/mine/index.dart';

class TabbarPage extends StatefulWidget {
  const TabbarPage({super.key});

  @override
  State<TabbarPage> createState() => _TabbarPageState();
}
class _TabbarPageState extends State<TabbarPage> {
  /// 定义tabList数据
  List tabList = [
    {
      'label': '首页',
      'activeIcon': 'assets/tabbar/home-active.png',
      'icon': 'assets/tabbar/home.png',
    },
    {
      'label': '分类',
      'activeIcon': 'assets/tabbar/cate-active.png',
      'icon': 'assets/tabbar/cate.png',
    },
    {
      'label': '购物车',
      'activeIcon': 'assets/tabbar/cart-active.png',
      'icon': 'assets/tabbar/cart.png',
    },
    {
      'label': '我的',
      'activeIcon': 'assets/tabbar/user-active.png',
      'icon': 'assets/tabbar/user.png',
    }
  ];
  /// 定义选中项索引
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /**
       * 页面内容区域
       */
      body: IndexedStack(
        // 索引栈：根据当前选中项索引，显示对应的页面,避免重复创建，具有性能优化
        // 解决切换页面时，页面状态丢失问题
        index: currentIndex,
        children: const[
          // 首页
          HomePage(),
          // 分类
          CategoryPage(),
          // 购物车
          CartPage(),
          // 我的
          MinePage(),
        ]
      ),
     /**
      * 底部导航栏
      */
      bottomNavigationBar: BottomNavigationBar(
        // 固定底部导航栏：解决底部导航栏文字显示不全问题，使用自定义样式要设置
        type: BottomNavigationBarType.fixed,
        // 选中项颜色
        selectedItemColor: Colors.red,
        // 未选中项颜色
        unselectedItemColor: Colors.grey,
        // 当前选中项索引
        currentIndex: currentIndex,
        // 实现点击切换选中项
        onTap: (index){
          setState(() {
            currentIndex = index;
          });
        },
        items:tabList.map((item){
          return BottomNavigationBarItem(
            // 未选中图标
            icon: Image.asset(item['icon'],width: 24,),
            // 选中图标
            activeIcon: Image.asset(item['activeIcon'],width: 24,),
            //底部导航文字
            label: item['label'],
          );
        }).toList(),
      ),
    );
  }
}

